<template>
  <div>
    <el-dialog
      :title="ifAdd"
      :visible.sync="addDiavisible"
      width="70%"
      @close="cancel"
      @opened="beforeopen"
    >
      <el-form
        :model="form"
        ref="formRef"
        :rules="formRules"
        label-width="100px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :lg="12" :xl="12">
            <el-form-item label="服务包名称" prop="name">
              <el-input v-model="form.name" :disabled="ifAdd!='新增服务包'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="12">
            <el-form-item label="服务类型" prop="type">
              <el-select v-model="form.type" style="width: 100%">
                <el-option
                  v-for="item in typeSe"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="12" :xl="12">
            <el-form-item label="适用人群">
              <el-select v-model="intendedFor" multiple style="width: 100%">
                <el-option
                  v-for="item in peopleSe"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="12">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="form.type == '0'">
        <el-row type="flex">
          <HButton type="add" @click="addLine">增加行数</HButton>
        </el-row>
        <!-- 表格 -->
        <el-table class="mt-20" :data="tableData" border stripe>
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="content" label="服务内容" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.content"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="yearServiceCount"
            label="年服务次数(次)"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.yearServiceCount"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            header-align="center"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              <HButton
                @click="del(scope.$index, scope.row)"
                type="delete"
                size="mini"
                >删除</HButton
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="form.type == '1'">
        <el-row type="flex" style="margin-top: 20px">
          <HButton type="add" @click="addLine1">增加行数</HButton>
        </el-row>
        <!-- 表格 -->
        <el-table class="mt-20" :data="tableData1" border stripe>
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column
            prop="content"
            label="服务包项目"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.content"
                type="textarea"
                autosize
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="收费编码"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.code"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="documents"
            label="收费文件依据"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.documents"
                type="textarea"
                autosize
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="chargeStandard"
            label="收费标准(元/次)"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.chargeStandard"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="yearServiceCount"
            label="年服务次数(次)"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.yearServiceCount" @blur="getTotalMoney(scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="应收费总额(元)"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.totalMoney" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="insuranceAmount"
            label="城乡居民医保补偿金额(元)"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.insuranceAmount"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="packageAmount"
            label="打包收费减免金额(元)"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.packageAmount" @blur="getSelfAmount(scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="selfAmount"
            label="居民自费金额(元)"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.selfAmount" ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            header-align="center"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              <HButton
                @click="del1(scope.$index, scope.row)"
                type="delete"
                size="mini"
                >删除</HButton
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addService } from "@/api/family_doctor/family_doctor";
import { inputValidator, selectValidator } from "@/utils/validate";
export default {
  data() {
    return {
      addDiavisible: false,
      data: "",
      ifAdd: "新增服务包",
      check: false,
      peopleSe: [
        { id: "1", name: "一般人群" },
        { id: "2", name: "特殊人群" },
      ],
      typeSe: [
        { id: 0, name: "免费" },
        { id: 1, name: "付费" },
      ],
      intendedFor: [],
      form: {
        intendedFor: "",
        type: 0,
        name: "",
        desc: "",
        detailList: [],
      },
      tableData: [],
      tableData1: [],
      formRules: {
        name: inputValidator,
        type: selectValidator,
      },
    };
  },
  created() {},
  methods: {
	  getTotalMoney(row){
		var c =   row.chargeStandard==''?0:row.chargeStandard;
		 var y =   row.yearServiceCount==''?0:row.yearServiceCount;
		  row.totalMoney =  c*y;
	  },
	  getSelfAmount(row){
		 var i =   row.insuranceAmount==''?0:row.insuranceAmount;
		  var p =   row.packageAmount==''?0:row.packageAmount;
		   var t =   row.totalMoney==''?0:row.totalMoney;
		   row.selfAmount =  t-i-p;
	  },
	  
    //关闭
    cancel() {
      if (this.check == true) {
        this.addDiavisible = false;
      } else {
        this.intendedFor = [];
        this.form.type = 0;
        this.form.name = "";
        this.form.desc = "";
        this.form.detailList = [];
        this.tableData = [];
        this.tableData1 = [];
        this.$emit("transData");
        this.addDiavisible = false;
      }
    },
    //弹窗渲染之前
    beforeopen() {},
    //提交
    addSubmit() {
      if (this.check == true) {
        return this.cancel();
      }
      this.$refs.formRef.validate((valid) => {
        if (!valid) return this.$message.error("请输入正确的格式!");
        if (this.form.type == 0) {
          this.form.detailList = this.tableData;
        } else {
          this.form.detailList = this.tableData1;
        }
        if (this.form.detailList.length == 0) {
          return this.$message.error("服务包内容不能为空！");
        }
        console.log(this.form.detailList);
        this.form.placeId = this.temPlaceId;
        this.form.intendedFor = this.intendedFor.toString();
        addService(this.form).then((res) => {
          if (res.code == "AA000000") {
            this.$message.success("添加成功！");
            this.cancel();
          }
        });
        
      });
    },
    //供父组件调用函数
    openDialog(ifAdd, scope, check) {
      if (ifAdd == true) {
        this.ifAdd = "新增服务包";
      } else if (ifAdd == false) {
        if (check == true) {
          this.ifAdd = "查看服务包";
        } else {
          this.ifAdd = "修改服务包";
        }
        this.form = scope;
        this.intendedFor = this.form.intendedFor.split(",");
        if (this.form.type == 0) {
          this.tableData = this.form.detailList;
        } else {
          this.tableData1 = this.form.detailList;
        }
      }
      this.check = check;
      this.addDiavisible = true;
    },
    //增加行数
    addLine() {
      var newLine = { content: "", yearServiceCount: "" };
      this.tableData.push(newLine);
    },
    //删除当前行
    del(index, row) {
      this.tableData.splice(index, 1);
    },
    //增加行数1
    addLine1() {
      var newLine = {
        content: "",
        code: "",
        documents: "",
        chargeStandard: "",
        yearServiceCount: "",
        totalMoney: "",
        insuranceAmount: "",
        packageAmount: "",
        selfAmount: "",
      };
      this.tableData1.push(newLine);
    },
    //删除当前行1
    del1(index, row) {
      this.tableData1.splice(index, 1);
    },
  },
};
</script>